<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="756px"
      title="二维码信息"
      wrapClassName="form-container"
      @cancel="closeModal()"
    >
      <div class="modal-main">
        <div class="title">{{ proName }}</div>
        <div class="qr-container">
          <div class="images">
            <vue-qr
              ref="qr"
              :margin="0"
              :text="qrUrl"
              :size="212"
              :autoColor="true"
              :logoSrc="logo"
              :logoScale="0.2"
            >
            </vue-qr>
          </div>

          <div class="base-info">
            <div class="list">
              <div class="label">桥梁名称</div>
              <div class="value">{{ dataSource.bridgeName || "--" }}</div>
            </div>
            <div class="list">
              <div class="label">幅别</div>
              <div class="value">{{ dataSource.amClass || "--" }}</div>
            </div>
            <div class="list">
              <div class="label">跨</div>
              <div class="value">{{ dataSource.span || "--" }}</div>
            </div>
            <div class="list">
              <div class="label">梁号</div>
              <div class="value">{{ dataSource.componentParts || "--" }}</div>
            </div>
            <div class="list">
              <div class="label">梁类型</div>
              <div class="value">{{ dataSource.beamTypeDesc || "--" }}</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import vueQr from "vue-qr";
import { chartString } from "@/utils";
import { getLoginData } from "@/tools";
export default {
  name: "qrCodeModal",
  components: {
    vueQr,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    ...mapGetters(["organization"]),
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          let { tenantCode, userId, sysSource } = getLoginData();
          let { qrCode } = this.dataSource;
          //   this.qrUrl = chartString({
          //     uid: userId,
          //     tenantCode,
          //     sysSource,
          //     qrCode,
          //   });
          this.qrUrl =
            `http://lh.gzbsx.com:70/dashboard/h5/qr.html` +
            chartString({
              qrCode,
            });
        }
      },
      immediate: true,
    },
    organization: {
      handler(val) {
        this.proName = val?.tenantName || "";
      },
      immediate: true,
    },
  },
  data() {
    return {
      proName: "",
      qrUrl: "",
      logo: "https://jszhgd.cn/static/pc/beamyard/qr_icon.jpg",
    };
  },
  methods: {
    //关闭弹窗
    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
//弹框
/deep/.form-container {
  .ant-modal-body {
    padding: 0;
  }
  .modal-main {
    padding: 20px 40px;
    max-height: 620px;
    .custom-scrollbar();
    .title {
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 40px;
    }
    .qr-container {
      .flex();
      .images {
        width: 219px;
        height: 218px;
        border-radius: 4px;
        flex-shrink: 0;
        border: 1px solid var(--primary-color);
        .flex();
        align-items: center;
        justify-content: center;
      }
      .base-info {
        margin-left: 32px;
        flex: 1;
        .flex();
        flex-direction: column;
        justify-content: center;

        .list {
          .flex();
          background: #ffffff;
          border: 1px solid #ededed;
          min-height: 40px;
          align-items: center;
          padding: 0 4px;
          box-sizing: border-box;
          .label {
            width: 100px;
            height: 32px;
            background: #f3f4f6;
            .flex();
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }
          .value {
            margin-left: 20px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #2a2b2f;
            word-break: break-all;
          }
        }
      }
    }
  }
}
</style>
